<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>vue页面 - 情绪清单结果展现</title>
		<!-- 引用 -->
		<link rel="stylesheet" href="../bootstrap5/css/bootstrap.min.css" />
		<style>
			body {
				background-color: rgba(152, 170, 139, 0.2);
				padding: 0 50px;
				padding-bottom: 100px;
				font-size: 18px;
			}
			.info{
				margin: 20px;
				padding: 20px;
			}
			a{
				text-decoration: none;
			}
			a:hover{
				text-decoration: underline;
			}			
			p{
				width: 80%;
				margin: 12px 20px 12px 20px;
				padding: 8px 200px 8px 50px;
				padding-right: 50px;
			}
			p.detail{
				white-space: break-all;
				width: 90%;
				/* margin: 10px 20px; */
				padding: 12px 40px ;
				background-color: rgba(255, 255, 255, 0.6);
				text-align: center;
				/* overflow:; */
				border-radius: 15px;
			}
			strong{
				text-shadow: 1px 1px 1px gray;
			}
		</style>
	</head>
	<body>
		<div class="container pt-3" id="content">
			<div class="row">
				<div  v-if="listdata.length == 0">
					<h1 >当前没有情绪记录，点击前往开始<a href="moodList.html">记录之旅</a>吧！</h1>
				</div>
				<div v-else >
					<div class="row">
						<div class=" d-flex justify-content-between">
							<span>{{listdata[0].name}}的情绪记录</span>
							<div>
								<a href="moodList.html">
									<button class="btn btn-outline-success" type="button"> 前往记录 </button>
								</a>
								
							</div>
							
						</div>
					</div>
					<div  class="row info border border-success" v-for="(list, index) in listdata" v-else >
						<h2>情绪记录{{index+1}}</h2>
						<p>
							在{{list.event_date[0]}}年{{list.event_date[1]}}月{{list.event_date[2]}}日，你经历了“<strong :style="{color: list.emotion_color, fontSize:'22px'}">{{list.emotion}}</strong>”情绪，你当时对它的描述是“<strong v-bind:style="{color: list.emotion_color}">{{list.emotion_detail}}</strong>”。
						</p>
						<p>
							你一开始对这种情绪的打分是：<strong>{{list.mark1}} </strong>分。
						</p>
						<p>
							事情的地点发生在{{list.event_place}}，你记录当时的情景如下：
						</p>
						<p class="detail">
							{{list.event_detail}}
						</p>
						<p>
							当时你产生了这样的想法：
						</p>
						<p class="detail ">
							{{list.thoughts}}
						</p>
						<p>
							你的身体产生了这些感觉：<strong>{{list.phy_reaction}}</strong>
						</p>
						<!-- <p >
							{{list.phy_reaction}}
						</p> -->
						<p>
							如果你的朋友遭受到这样的情景，你当时会想对他说：
						</p>
						<p class="detail">
							{{list.rethink}}
						</p>
						<p>
							在经过思考后，你对这种情绪的强度更新为：<strong>{{list.mark2}}</strong>分。
						</p>
						<p>
							你认为你再次遇到这种情况时应该做的事情如下：
						</p>
						<p class="detail">
							{{list.action}}
						</p>
						<div class="d-flex justify-content-end mt-2" >
							<button type="button" class="btn bg-danger bg-opacity-75 text-white" @click="deleteItem(index)">删除</button>
							<button type="button" class="btn btn-outline-secondary ms-2" type="button" @click="downloadAlert(list.email)"> 下载记录 </button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/vue.global.js"></script>
		<script src="js/data.js"></script>
		<script type="text/javascript">
			var  moodlists=[];
			const vm = Vue.createApp({
				date(){
					return {
						listdata : []
					}
				},
				created(){
					// 获取表单字符串转为变量
					if(localStorage.getItem('moodlists'))
					{
						this.listdata = localStorage.getItem('moodlists').split(';')
						this.listdata.pop(); // 最后为空字符串					
					}
					else 
					{
						this.listdata = list_str.split(';')
						this.listdata.pop(); // 最后为空字符串
					}
					for(let i = 0;i<this.listdata.length;i++)
					{ 
						this.listdata[i]=JSON.parse(this.listdata[i]);
					
					}
				},
				methods:{
					deleteItem:function(index){
						if(confirm("你确定要删除这条记录吗？")){
							this.listdata.splice(index, 1);	
							let str='';
							for(let i=0;i<this.listdata.length;i++)
							{
								str+=JSON.stringify(this.listdata[i])+';'
							}
							localStorage.setItem('moodlists',str);
							this.$forceUpdate();
						}						
					},
					downloadAlert:function(email){
						if(!confirm("你确定要发送至这个邮箱吗："+email))
						{
							let ok = false, emailExp = /^[a-zA-Z0-9_]+@\w+(\.\w+)+$/;;
							while(!ok)
							{
								email = prompt("请输入正确邮箱：")
								ok = emailExp.test(email)						
							}
						}
						// 生成报告并下载操作
					}
				}
			}).mount("#content");
		</script>
	</body>
</html>